<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>开心笑话</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }
    .ios-btn {
      transition: all 0.2s;
    }
    .ios-btn:active {
      transform: scale(0.97);
      opacity: 0.9;
    }
    .ios-card {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    }
    .status-bar {
      height: 44px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
    }
    .header-area {
      position: fixed;
      top: 44px;
      left: 0;
      right: 0;
      z-index: 40;
      background-color: rgb(249, 250, 251);
      padding: 1rem;
      border-bottom: 1px solid rgba(229, 231, 235);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    .home-indicator {
      height: 5px;
      width: 36%;
      background-color: #000;
      border-radius: 3px;
      opacity: 0.2;
    }
    .content-area {
      margin-top: 144px; /* 状态栏+头部高度+额外间隙 */
      padding-bottom: 180px; /* 为底部笑话区域留出空间 */
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .joke-item {
      animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .loading {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top-color: #3b82f6;
      animation: spin 1s ease-in-out infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .joke-section {
      max-height: 200px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .jokes-container {
      bottom: 100px;
      max-height: calc(100vh - 250px);
      overflow-y: auto;
    }
    .search-form {
      display: flex;
      margin-bottom: 10px;
    }
    .search-input {
      flex: 1;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 14px;
      outline: none;
    }
    .search-input:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }
  </style>
</head>
<body class="bg-gray-100 text-gray-800 min-h-screen">
  <!-- iOS 状态栏 - 固定在顶部 -->
  <div class="status-bar bg-white flex items-center justify-between px-5 pt-2">
    <div class="text-sm font-semibold">9:41</div>
    <div class="flex space-x-1">
      <i class="fas fa-signal"></i>
      <i class="fas fa-wifi"></i>
      <i class="fas fa-battery-full"></i>
    </div>
  </div>

  <!-- 头部 - 固定在状态栏下方 -->
  <div class="header-area">
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-2">
        <button onclick="window.location.href='projects.html'" class="mr-2 px-3 py-1 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition text-sm">返回</button>
        <div class="w-10 h-10 rounded-full overflow-hidden">
          <img src="https://www.loliapi.com/acg/pp/" alt="头像" class="w-full h-full object-cover" />
        </div>
      </div>
      <h1 class="text-2xl font-bold">开心笑话</h1>
    </div>
  </div>

  <!-- 主内容区 -->
  <div class="content-area">
    <!-- 主图 -->
    <div class="rounded-2xl overflow-hidden mb-6 ios-card">
      <img src="https://www.loliapi.com/acg/" alt="笑话配图" class="w-full h-48 object-cover" />
    </div>
  </div>

  <!-- 固定的笑话展示区域 -->
  <div class="fixed jokes-container left-0 right-0 px-4">
    <!-- 单条笑话区域 -->
    <div class="bg-white rounded-2xl p-5 mb-4 ios-card">
      <div class="flex items-center mb-3">
        <div class="w-7 h-7 bg-blue-100 rounded-full flex items-center justify-center text-blue-500">
          <i class="fas fa-laugh"></i>
        </div>
        <h2 class="ml-3 text-base font-semibold">单条笑话</h2>
      </div>

      <!-- 添加搜索表单 -->
      <form id="singleJokeForm" class="search-form">
        <input type="text" class="search-input" placeholder="按回车获取单条笑话" />
      </form>

      <div id="singleJokeContainer" class="joke-section">
        <div class="p-4 bg-gray-50 rounded-xl joke-item">
          <p class="text-gray-700">点击"生成一条笑话"按钮或按回车键获取笑话</p>
        </div>
      </div>
    </div>

    <!-- 多条笑话区域 -->
    <div class="bg-white rounded-2xl p-5 ios-card">
      <div class="flex items-center mb-3">
        <div class="w-7 h-7 bg-purple-100 rounded-full flex items-center justify-center text-purple-500">
          <i class="fas fa-list"></i>
        </div>
        <h2 class="ml-3 text-base font-semibold">多条笑话</h2>
      </div>

      <!-- 添加搜索表单 -->
      <form id="multiJokeForm" class="search-form">
        <input type="number" min="1" max="10" value="3" class="search-input" placeholder="输入笑话数量，按回车获取" />
      </form>

      <div id="multiJokeContainer" class="joke-section">
        <div class="p-4 bg-gray-50 rounded-xl joke-item">
          <p class="text-gray-700">点击"生成多条笑话"按钮或按回车键获取笑话</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 按钮区域 - 固定在底部 -->
  <div class="fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-200 p-4">
    <div class="grid grid-cols-2 gap-4">
      <button id="singleJokeBtn" class="ios-btn bg-blue-500 text-white py-3 px-4 rounded-xl font-medium flex items-center justify-center">
        <i class="fas fa-random mr-2"></i>
        生成一条笑话
      </button>
      <button id="multiJokeBtn" class="ios-btn bg-purple-500 text-white py-3 px-4 rounded-xl font-medium flex items-center justify-center">
        <i class="fas fa-list-ul mr-2"></i>
        生成多条笑话
      </button>
    </div>
    <!-- iOS Home Indicator -->
    <div class="flex justify-center mt-4">
      <div class="home-indicator"></div>
    </div>
  </div>

  <script>
    // 获取DOM元素
    const singleJokeContainer = document.getElementById('singleJokeContainer');
    const multiJokeContainer = document.getElementById('multiJokeContainer');
    const singleJokeBtn = document.getElementById('singleJokeBtn');
    const multiJokeBtn = document.getElementById('multiJokeBtn');
    const singleJokeForm = document.getElementById('singleJokeForm');
    const multiJokeForm = document.getElementById('multiJokeForm');

    // API地址
    const jokeApiUrl = 'https://api-vue-base.itheima.net/api/joke';
    const jokeListApiUrl = 'https://api-vue-base.itheima.net/api/joke/list';

    // 显示加载状态 - 单条笑话
    function showSingleLoading() {
      singleJokeContainer.innerHTML = `
        <div class="p-4 bg-gray-50 rounded-xl flex items-center justify-center">
          <div class="loading mr-2"></div>
          <p class="text-gray-500">正在加载笑话...</p>
        </div>
      `;
    }

    // 显示加载状态 - 多条笑话
    function showMultiLoading() {
      multiJokeContainer.innerHTML = `
        <div class="p-4 bg-gray-50 rounded-xl flex items-center justify-center">
          <div class="loading mr-2"></div>
          <p class="text-gray-500">正在加载笑话...</p>
        </div>
      `;
    }

    // 显示错误信息 - 单条笑话
    function showSingleError(message) {
      singleJokeContainer.innerHTML = `
        <div class="p-4 bg-red-50 rounded-xl text-red-500">
          <p>${message || '获取笑话失败，请稍后再试'}</p>
        </div>
      `;
    }

    // 显示错误信息 - 多条笑话
    function showMultiError(message) {
      multiJokeContainer.innerHTML = `
        <div class="p-4 bg-red-50 rounded-xl text-red-500">
          <p>${message || '获取笑话失败，请稍后再试'}</p>
        </div>
      `;
    }

    // 获取单条笑话
    async function fetchSingleJoke() {
      try {
        showSingleLoading();

        const response = await fetch(jokeApiUrl);
        if (!response.ok) {
          throw new Error('网络请求失败');
        }

        const jokeText = await response.text();

        singleJokeContainer.innerHTML = `
          <div class="p-4 bg-gray-50 rounded-xl joke-item">
            <p class="text-gray-700">${jokeText}</p>
          </div>
        `;
      } catch (error) {
        console.error('获取笑话出错:', error);
        showSingleError(error.message);
      }
    }

    // 获取多条笑话
    async function fetchMultipleJokes() {
      try {
        showMultiLoading();

        // 获取用户输入的笑话数量
        const numInput = multiJokeForm.querySelector('input');
        const num = numInput ? numInput.value : 3;

        // 使用新的接口获取多条笑话
        const response = await fetch(`${jokeListApiUrl}?num=${num}`);
        if (!response.ok) {
          throw new Error('网络请求失败');
        }

        const result = await response.json();

        if (result.code !== 200) {
          throw new Error(result.msg || '获取笑话失败');
        }

        // 显示多条笑话
        multiJokeContainer.innerHTML = result.data.map(joke => `
          <div class="p-4 bg-gray-50 rounded-xl joke-item mb-2">
            <p class="text-gray-700">${joke.replace(/\n/g, '<br>')}</p>
          </div>
        `).join('');

      } catch (error) {
        console.error('获取笑话出错:', error);
        showMultiError(error.message);
      }
    }

    // 页面加载时，不自动获取笑话，等待用户点击或按回车
    window.addEventListener('DOMContentLoaded', () => {
      // 获取头部高度
      const headerHeight = document.querySelector('.header-area').offsetHeight;
      const statusBarHeight = document.querySelector('.status-bar').offsetHeight;
      const totalHeaderHeight = headerHeight + statusBarHeight + 20; // 额外间距

      // 调整笑话容器位置
      const jokesContainer = document.querySelector('.jokes-container');
      jokesContainer.style.top = `${totalHeaderHeight}px`;

      // 不再自动获取笑话
      // fetchSingleJoke();
      // fetchMultipleJokes();
    });

    // 添加按钮点击事件
    singleJokeBtn.addEventListener('click', fetchSingleJoke);
    multiJokeBtn.addEventListener('click', fetchMultipleJokes);

    // 添加表单提交事件（回车键）
    singleJokeForm.addEventListener('submit', (e) => {
      e.preventDefault(); // 阻止表单默认提交行为
      fetchSingleJoke();
    });

    multiJokeForm.addEventListener('submit', (e) => {
      e.preventDefault(); // 阻止表单默认提交行为
      fetchMultipleJokes();
    });
  </script>
</body>
</html>